<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考试中</title>
    <link rel="stylesheet" href="/css/front/exam.css">
</head>
<body>
<form action="">
    <div id="exam2" class="exam2"></div>
    <div class="center">
        <button id="toTop">回到顶部</button><button id="endExam">提交试卷</button>
    </div>
</form>
</body>
<script>
    $(document).ready(function () {
        examInit();
    });
    function toTop() {
        $('html , body').animate({scrollTop: 0},'slow');
    };
    $("#endExam").click(function () {
        alert("选择题成绩为：10分！\n 其余部分待批改！");
        $(location).prop('/html/front/student.html');
    });
    function examInit() {

        let h = 330; //main高
        let num=0;//题号

        // 选择题 ul:20px li:40px line-height:100px
        let selectItem = "<ul class='select-item'>"+
            "<p>选择题：(每题5分，共5题)</p>";
        for (let i =0;i<5;i++){
            h += 80;
            num++;
            selectItem += "<li>"+num+"."+"ssssssssssssssssssssssssssss四个选项中正确的是：</li>\n" +
                "        <li> <input type='radio'>A.xxx <input type='radio'>B.xxx <input type='radio'>C.xxx <input type='radio'>D.xxx</li>";
        }
        selectItem += "</ul>";

        //填空题 ul:20px li:40px
        let fillItem = "<ul class='fill-item'>" +
            "<p>填空题：(每题5分，共5题)</p>" ;
        for (let i =0;i<5;i++){
            h+=40;
            num++;
            fillItem += "<li>"+num+"."+"填空题题目 <input type='text' value=''>填空题题目</li>\n";
        }
        fillItem += "</ul>";

        //简答题 ul:20px li:40px
        let shortAnswerItem ="<ul class='short-answer-item'>"+
            "<p>简答题：(每题10分，共5题)</p>";
        for (let i =0;i<5;i++){
            h += 140;
            num++;
            shortAnswerItem += "<li>"+num+"."+"简答题题目：</li>\n" +
                "<li><input type='text' value=''></li>";
        }
        shortAnswerItem += "</ul>";

        let examItem =  selectItem +fillItem +shortAnswerItem;
        console.log(h);
        $("main").css("height",h);
        $("#exam2").html(examItem);
    }
</script>
</html>